<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


    <link rel="stylesheet" href="./stu.css">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <form class="form-group" id="studentInput">
            <div class="studentInfo">
                姓名：<input type="text" class="form-control" v-model="name">
            </div>
            <div class="studentInfo">
                年龄：<input type="number" class="form-control" v-model="age" max="100" min="18">
            </div>
            <div class="studentInfo">
                性别： 
                <input type="radio" value="男" v-model="gender" checked> 男 &nbsp;&nbsp;&nbsp;
                <input type="radio" value="女" v-model="gender"> 女
            </div>
            <div class="studentInfo">
                手机号：<input type="text" class="form-control" v-model="iphone">
            </div>
            <div  id="btn">
                <button  class="btn btn-success" @click="add" type="button">添加</button>
                <input type="reset" value="重置" class="btn btn-danger">
            </div>
        </form>

        <div id="studentList">
            <div class="row">
                <div class="column">姓名</div>
                <div class="column">年龄</div>
                <div class="column">性别</div>
                <div class="column">手机号</div>
                <div class="column">操作</div>
            </div>
            <div class="row" v-for="s,i in students">
                <div class="column">{{s.name}}</div>
                <div class="column">{{s.age}}</div>
                <div class="column">{{s.gender}}</div>
                <div class="column">{{s.iphone}}</div>
                <div class="column">
                    <button class="btn btn-danger" @click="del(i)">删除</button>
                </div>
            </div>
        </div>
    </div>


    <script>
        new Vue({
            el: "#app",
            data: {
                name:"",
                age:"",
                gender:"",
                iphone:"",
                students: [
                    { id: 0, name: "halo", age: 20, gender: "男", iphone: "15893656698" },
                    { id: 1, name: "halo", age: 22, gender: "男", iphone: "15893656698" },
                    { id: 2, name: "halo", age: 21, gender: "男", iphone: "15893656698" },
                ]
            },
            
            methods:{
                generateId(){
                    return Math.random().toString(16).slice(2)
                },
                add(){
                    if(this.name && this.age && this.gender && this.gender && this.iphone){
                        
                        let stu = {
                            id:this.generateId(),
                            name:this.name,
                            age:this.age,
                            gender:this.gender,
                            iphone:this.iphone
                        }
    
                        this.students.push(stu)
                    }
                },
                del(i){
                    this.students.splice(i, 1);
                }
            }
        })
    </script>
</body>

</html>